/*-------------------------------------------------------------------------------------------------------*/
//@if指令
//@if 指令可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false返回另一个样式块。
//在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。
//SCSS
@mixin display($boolean:true) {
  @if $boolean {
      display: block;
    }
  @else {
      display: none;
    }
}
//调用
.block {
  @include display;
}
.hidden{
  @include display(false);
}
//编译出来的CSS:
.block {display: block}
.hidden {display: none}

/*-------------------------------------------------------------------------------------------------------*/

//@for循环
//语法
@for $i from <start> through <end>
@for $i from <start> to <end>
//$i 表示变量；start 表示起始值；end 表示结束值
//through 表示包括 end 这个数，而 to 则不包括 end 这个数。
//如下代码，先来个使用 through 关键字的例子：
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//编译出来的 CSS:
.item-1 {width: 2em}
.item-2 {width: 4em}
.item-3 {width: 6em}
//再来个 to 关键字的例子：
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
//编译出来的 CSS:
.item-1 {width: 2em}
.item-2 {width: 4em}

//复杂实例
//SCSS 
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 6 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}
//编译出来的 CSS:
.span1, .span2, .span3, .span4, .span5, .span6 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 {width: 60px;}
.span2 {width: 140px;}
.span3 {width: 220px;}
.span4 {width: 300px;}
.span5 {width: 380px;}
.span6 {width: 460px;}

/*-------------------------------------------------------------------------------------------------------*/

//@while指令
//@while 指令会生成不同的样式块，直到表达式值为 false 时停止循环。这个和 @for 指令很相似
//SCSS
$types: 4;
$type-width: 20px;
@while $types > 0 {
    .span-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}
//编译出来的 CSS
.span-4 {width: 24px;}
.span-3 {width: 23px;}
.span-2 {width: 22px;}
.span-1 {width: 21px;}

/*-------------------------------------------------------------------------------------------------------*/

//@each遍历
//@each 循环就是去遍历一个列表，然后从列表中取出对应的值。
//语法
@each $var in <list>
//$list 就是一个列表
$list: adam john wynn mason kuroir;
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}
//调用
.author-bio {
    @include author-images;
}
//编译出 CSS:
.author-bio .photo-adam {background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {background: url("/images/avatars/kuroir.png") no-repeat; }

/*-------------------------------------------------------------------------------------------------------*/

//常用函数：round()、ceil()、floor()、abs()、min()、max()、random()

/*-------------------------------------------------------------------------------------------------------*/

//round() 函数可以将一个数四舍五入为一个最接近的整数：
round(12.3)            ->  12
round(12.5)            ->  13
round(20%)             ->  20%
round(2.2%)            ->  2%
round(3.9em)           ->  4em
round(2.3px)           ->  2px  
round(2px / 3)         ->  1
round(1px / 3)         ->  0
round(3px / 2em)       ->  2px/em
.footer {width:round(12.3px)}    ->    .footer {width: 12px;}

/*------------------------------------------------------------------------------------------------------------*/

//ceil() 函数将一个数转换成最接近于自己的整数(只入不舍)
ceil(2.0)              ->  2
ceil(2.1)              ->  3
ceil(2.3%)             ->  3%
ceil(2.3px)            ->  3px
.footer {width:ceil(12.3px)}     ->    .footer {width: 13px;}

/*-------------------------------------------------------------------------------------------------------*/

//floor() 函数刚好与 ceil() 函数功能相反(只舍不入)
floor(2.0)              ->  2
floor(2.1)              ->  2
floor(2.3%)             ->  2%
floor(2.3px)            ->  2px
.footer {width:floor(12.3px)}     ->    .footer {width: 12px;}

/*-------------------------------------------------------------------------------------------------------*/

//abs() 函数会返回一个数的绝对值。
abs(10)              ->  10
abs(-10)             ->  10
abs(-10px)           ->  10px
abs(-2em)            ->  2em
abs(-.5%)            ->  0.5%
abs(-1px / 2px)      ->  0.5
.footer {width:abs(-12.3px)}     ->    .footer {width: 12.3px;}

/*-------------------------------------------------------------------------------------------------------*/

//min()和max()函数可以在多个数字之间找到最小或最大值
//注意多个数字类型及单位要相同
min(1,2,1%,3,300%)             ->  1%
min(1px,2,3px)                 ->  1px
min(1em,2em,6em)               ->  1em
max(1,5)                       ->  5
max(1px,5px)                   ->  5px

/*-------------------------------------------------------------------------------------------------------*/

//random() 函数是用来获取一个随机数：
random()        ->  0.03886

/*-------------------------------------------------------------------------------------------------------*/

//列表函数： 
length($list)//返回一个列表的长度值；
nth($list, $n)//返回一个列表中指定的某个标签值
join($list1, $list2, [$separator])//将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])//将某个值放在列表的最后；
zip($lists…)//将几个列表结合成一个多维的列表；
index($list, $value)//返回一个值在列表中的位置值。

/*-------------------------------------------------------------------------------------------------------*/

//length()
//length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错：
length(10px)                                         ->  1
length(10px 20px (border 1px solid) 2em)             ->  4
length(border 1px solid)                             ->  3

/*-------------------------------------------------------------------------------------------------------*/

//nth($list,$n)
//nth() 函数用来指定列表中某个位置的值。与其他语言不同的是，$n是从1开始，而不是从0开始
nth(10px 20px 30px,1)                                ->  10px
nth((Helvetica,Arial,sans-serif),2)                  ->  "Arial"
nth((1px solid red) border-top green,1)              ->  (1px "solid" #ff0000)

/*-------------------------------------------------------------------------------------------------------*/

//join() 函数是将两个列表连接合并成一个列表。
//不过 join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错：
join(10px 20px, 30px 40px)                      ->    (10px 20px 30px 40px)  
join((blue,red),(#abc,#def))                    ->    (#0000ff, #ff0000, #aabbcc, #ddeeff)
join((blue,red),(#abc #def))                    ->    (#0000ff, #ff0000, #aabbcc, #ddeeff)
//但很多时候不只碰到两个列表连接成一个列表，这个时候就需要将多个 join() 函数合并在一起使用：
join((blue red), join((#abc #def),(#dee #eff))) -> (#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

/*-------------------------------------------------------------------------------------------------------*/

//append() 函数是用来将某个值插入到列表中，并且处于最末位。
append(10px 20px ,30px)                ->     (10px 20px 30px)
append((10px,20px),30px)               ->     (10px, 20px, 30px)
append(green,red)                      ->     (#008000 #ff0000)
append(red,(green,blue))               ->     (#ff0000 (#008000, #0000ff))

/*-------------------------------------------------------------------------------------------------------*/

//index($list, $value) 函数类似于索引一样，主要让你找到某个值在列表中所处的位置。
//从1开始，第一个值就是1，第二个值就是 2，依此类推：
index(1px solid red, 1px)              ->   1
index(1px solid red, solid)            ->   2
index(1px solid red, red)              ->   3  

/*-------------------------------------------------------------------------------------------------------*/

//颜色函数
//rgba函数将一个Hex颜色转换成rgba颜色，语法：
rgba($color,$alpha)
//如下：SCSS
.rgba {
    color: rgba(#f36,.5);
    background: rgba(orange,.5);
    border-color: rgba(green,.5);
}
//在括号是函数的参数，第一个参数是需要转换的颜色，他可以是任何颜色的表达方式，也可以是一个颜色变量；
//第二个参数是颜色的透明度，其值是 0~1 之间。上面的代码转译出来：
.rgba {
  color: rgba(255, 51, 102, 0.5);
  background: rgba(255, 165, 0, 0.5);
  border-color: rgba(0, 128, 0, 0.5);
}

/*-------------------------------------------------------------------------------------------------------*/

//@import
//Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。
//所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 
//另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
//如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。
//例如：
@import "foo.scss";
@import "foo";
//两者都将引入 foo.scss 文件
//也可以通过一个 @import 引入多个文件。例如：
@import "rounded-corners", "text-shadow";
//将引入 rounded-corners 和 text-shadow 两个文件。

//嵌套 @import
//虽然大部分时间只需在顶层文件使用 @import 就行了， 但是，你还可以把他们包含在 CSS 规则 和 @media 规则中。
//假设要引入的样式文件`example.scss`文件中包含这样的代码：
.div {color: red;}
//然后这样引用：
#main {
  @import "example";
}
//编译出来的 CSS：
#main .div {color: red;}

/*-------------------------------------------------------------------------------------------------------*/

//@media 和css3的media查询功能相同
//@debug @error 可以用来调试scss 